import React, { useState } from 'react'
import './TodoHeader.css';
import store from '../../../redux/store';
import { asyncAddTodo } from '../../../redux/reducers/todoReducer';

export default function TodoHeader() {
  //定义状态
  let [v, setV] = useState('');
  //定义handleKeyup函数
  let handleKeyup = (e) => {
    //判断是否按下的是回车键
    if(e.code.toUpperCase() === 'ENTER'){
      //新增   异步更新状态 
      store.dispatch(asyncAddTodo(v));
    }
  }
  return (
    <div className="todo-header">
      <input onKeyUp={handleKeyup} value={v} onChange={(e) => setV(e.target.value)} type="text" placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
